<template>
  <!-- 菜单栏布局 -->
  <button @click="flag = !flag">el-switch</button>

  <div class="parent">
    <transition name="fade">
      <div v-if="flag" class="box"></div>
    </transition>
  </div>
</template>

<script setup lang='ts'>
import { ref, reactive, defineAsyncComponent} from 'vue'
const flag = ref<boolean>(true)

</script>

<style lang="less">
 html,body,#app{
   height: 100%;
   overflow: hidden;
 }
 .box{
  width: 200px;
  height: 200px;
  background: red;
 }
 .fade-enter-from{
  width: 0;
  height: 0;
  transform: rotate(360deg);

 }
 .fade-enter-active{
  transition: all 1.5s ease;
 }
 .fade-enter-to{
  width: 200px;
  height: 200px;
 }
 .fade-leave-from{
  width: 200px;
  height: 200px;
  transform: rotate(360deg);

 }
 .fade-leave-active{
  transition: all 5s ease;

 }
 .fade-leave-to{
  width: 0;
  height: 0;
 }


</style>